<template>
    <div>
      <Card>
        <div style="margin:0 0 16px 0;height: 48px;">
          <Select v-model="search_value" style="width:300px;float: left;margin-right: 10px">
            <Option v-for="(item, index) in search_value_arr" :value="item.id" :key="index">{{ item.value }}</Option>
          </Select>
          <Button style="" type="primary" class="large" @click="getState()">搜索</Button>
        </div>
        <div class="ltitle">
          沟通记录
        </div>
        <Table :columns="columns" :data="work"></Table>
        <div class="center">
          <div class="pageBox">
            <Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage" />
          </div>
        </div>
      </Card>
    </div>
</template>

<script>
    export default {
      name: 'complaints',
      data () {
        return {
          pageSize: 10,
          count: 0,
          page: 0,
          state: '',
          work: [],
          newList: [],
          columns: [
            {
              title: '投诉类型',
              key: 'complaintType'
            },
            {
              title: '产品类型',
              key: 'productType',
							render: (h, params) => {
								if (params.row.productType === 1) {
									return h('span', '软件')
								} else {
									return h('span', '硬件')
								}
							}
            },
            {
              title: '投诉主题',
              key: 'complaintTheme'
            },
            {
              title: '描述内容',
              key: 'description'
            },
            {
              title: '创建时间',
              key: 'createTime'
            },
            {
              title: '创建人ID',
              key: 'createBy'
            },
            {
              title: '状态',
              key: 'processingState',
              render: (h, params) => {
                if (params.row.processingState === 1) {
                  return h('span', ' 未处理')
                }
                if (params.row.processingState === 2) {
                  return h('span', ' 已处理 ')
                }
              }
            },
            {
              title: '操作',
              key: 'handle',
              render: (h, params) => {
								let disable = true
                if (params.row.processingState === 1) {
									disable = false
								}
								return h('div', [
									h('Button', {
										props: {
											type: 'primary',
											size: 'small',
											disabled: disable
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.$router.push({
													name: 'dispose',
													params: {
														id: params.row.id
													}
												})
											}
										}
									}, '处理')
								])
              }
            }
          ],
          search_value: '',
          search_value_arr: [
            {
              id: 1,
              value: '未处理'
            },
            {
              id: 2,
              value: '已处理'
            }
          ]
          }
      },
      methods: {
        // 下拉获取状态
        getState () {
          this.state = this.search_value
          this.getList()
        },
        // 页面跳转
        handlePage (page) {
          this.page = page
          this.getList()
        },
        // 获取所有投诉意见
        getList () {
          this.$api.get(0, '/wl/v2/complaintSheet/page',	{
						page: this.page,
						limit: this.pageSize,
						processingState: this.state
					}, r => {
            if (r.data.code === 0) {
              for (let i = 0; i < r.data.data.data.length; i++) {
                if (r.data.data.data[i].complaintType === 1) {
                 r.data.data.data[i].complaintType = '投诉'
                } else if (r.data.data.data[i].complaintType === 2) {
                  r.data.data.data[i].complaintType = '意见'
                }
              }
              this.work = r.data.data.data
              this.count = r.data.data.total
            }
          })
        }
      },
      mounted () {
        this.getList()
      }
    }
</script>

<style  lang="less">
	div.ltitle {
		background: #eeeeff;
		padding: 15px 10px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
</style>
